<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由01</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <!-- <self-home></self-home> -->
        <button @click="toRoom1()">1号厅</button>
        <button @click="toRoom2()">2号厅</button>

        <router-link to="/">首页</router-link>
        <router-link to="/room1">1号厅</router-link>
        <router-link to="/room2">2号厅</router-link>
        <router-view></router-view>
    </div>

    <template id="room-1">
        <div>
            <h3>1号厅</h3>
            <p>你好！李焕英</p>
        </div>
    </template>
    <script>
        var room1 = Vue.component('room-1', {
            template: '#room-1'
        });
    </script>

    <template id="room-2">
        <div>
            <h3>2号厅</h3>
            <p>唐人街探案3</p>
            <button @click="toHome()">回到首页</button>
        </div>
    </template>
    <script>
        var room2 = Vue.component('room-2', {
            template: '#room-2',
            methods: {
                toHome() {
                    this.$router.push('/');
                }
            }
        });
    </script>

    <!-- <script type="text/x-template" id="self-home"></script> -->
    <template id="self-home">
        <div>
            <h3>{{title}}</h3>
            <button @click="delItem()">删除</button>
            <div v-for="(item, index) in arr">
                <input type="checkbox" v-model="item.status" />
                <span v-text="item.name"></span>
            </div>
        </div>
    </template>
    <script>
        var selfHome = Vue.component('self-home', {
            template: '#self-home',
            methods: {
                delItem() {
                    // 删除所有status为true的项目，被勾选的
                    // 保留所有status为false的项目，没被勾选
                    var temp = [];
                    for (var i = 0; i < this.arr.length; i++) {
                        // 把所有没勾选的项目，添加到temp中
                        if (this.arr[i].status === false) {
                            temp.push(this.arr[i]);
                        }
                    }
                    this.arr = temp;
                    console.log('delItem...');
                }
            },
            data() {
                return {
                    arr: [
                        { name: '大盘鸡', status: false },
                        { name: '烤肉饭', status: false },
                        { name: '麻辣拌', status: false },
                        { name: '盖浇饭', status: false },
                        { name: '炒拉条', status: false },
                    ],
                    title: '我是首页',
                };
            },

        });
    </script>

    <script>
        // 路由实例，遥控器，电影院
        var router = new VueRouter({
            // 所有的路由组件
            routes: [
                {
                    path: '/',
                    component: selfHome
                },
                {
                    path: '/room1', // 路径
                    component: room1  // 路径下展示的组件
                },
                {
                    path: '/room2',
                    component: room2
                }
            ]
        });
        var vue = new Vue({
            el: '#app',
            router,
            methods: {
                toRoom1() {
                    console.log('toRoom1...');
                    this.$router.push('/room1');
                },
                toRoom2() {
                    console.log('toRoom2...');
                    this.$router.push('/room2');
                },
            }
        });
        /*
            路由：vue-router，根据不同的路径展示不同的组件内容，原理是锚链接
            router：VueRouer的实例，负责跳转
            route：单个路由组件页面，负责展示
            1.定义组件
            2.初始化VueRouter({配置})
            3.把router注入到vue实例中
            4.在页面上添加<router-view></router-view>标签

            路由跳转：
            1.类似a标签的方式：<router-link to="路径"></router-link>
            2.使用this.$router.push(路径);  当前页重复跳转，默认会报错

            *在任何组件中都可以使用this.$router
         */
    </script>
</body>

</html>